<script setup>
const props = defineProps({
  showArrow: {
    type: Boolean,
    default: false
  },
  /**
   * all - click any point of item will invoke the event
   * left -
   * right
   */
  eventType:{
    type:String,
    default:'left'
  }
})
const emits = defineEmits(['listClick'])



const itemClick = function (type) {
  const {eventType = 'all'} = props
  if(type === eventType){
    emits('listClick')
  }
}
</script>

<template>
  <div class="cc-list-item-container">
    <div class="item-warp" @click="itemClick('all')">
      <div class="item-body">
        <div class="item-icon">
          <slot name="icon"></slot>
        </div>

        <div class="item-content">
          <span class="item-title" @click="itemClick('left')">
            <slot name="title"></slot>
          </span>
          <slot></slot>
        </div>
      </div>

      <div class="item-icon" @click="itemClick('right')">
        <uni-icons
          v-if="props.showArrow"
          :size="16"
          class="uni-icon-wrapper"
          color="#bbb"
          type="arrowright"
        />
      </div>
    </div>
  </div>
</template>

<style scoped lang="scss">

.cc-list-item-container{

  .item-warp{
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: space-between;
    padding: 0 22rpx;
    min-height: 110rpx;
    border-bottom: 1px solid #adadad;

    .item-title{
      font-size: 14px;
      color: #1a1a1a;
    }
  }
}
.uni-icon-wrapper {
  /* #ifndef APP-NVUE */
  display: flex;
  /* #endif */
  align-items: center;
  padding: 0 10px;
}
</style>
